<template>
  <div>
    <el-table :data="users" border style="width: 100%">
      <el-table-column type="index" label="#" width="48" />
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="mobile" label="电话" />
      <el-table-column prop="role_name" label="角色" />
      <el-table-column prop="mg_state" label="状态">
        <template slot-scope="{row}">
          <el-switch
            :value="row.mg_state"
            active-color="#409eff"
            inactive-color="#dcdfe6"
            @change="changMgState($event,row.id)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="$emit('setUser',scope.row)" />
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="delUser(scope.row.id)" />
          <el-button size="mini" type="warning" icon="el-icon-s-tools" @click="setUser(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="分配角色" :visible.sync="dialogVisible">
      <el-col style="margin: 10px 0">
        当前的用户：{{ dialogInfo.username }}
      </el-col>
      <el-col style="margin: 10px 0">
        当前的角色：{{ dialogInfo.role_name }}
      </el-col>
      <el-col style="margin: 10px 0">
        当前的角色：
        <el-select v-model="rolesId" placeholder="请选择">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRole">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { editState, deleteUser, editUserRole } from '@/api/UserManagement'
import { getRoles } from '@/api/roles'
export default {
  name: 'UserList',
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogInfo: {},
      roles: [],
      rolesId: ''
    }
  },

  created() {},

  methods: {
    async changMgState(e, id) {
      await editState(id, e)
      this.$message.success('修改成功')
      this.$emit('edit-state', id)
    },
    delUser(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteUser(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$emit('success')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async setUser(row) {
      this.dialogVisible = true
      this.dialogInfo = row

      this.roles = await getRoles()
    },
    async editRole() {
      console.log(1)
      if (!this.rolesId) return this.$message.error('角色不能为空')
      await editUserRole({
        id: this.dialogInfo.id,
        rid: this.rolesId
      })
      this.rolesId = ''
      this.$message.success('修改成功')
      this.dialogVisible = false
      this.$emit('success')
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-bottom: 20px;
}
</style>
